<!DOCTYPE html>
<html>

<head>
    <title> The Data Flows Down </title>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin></script>

    <style>
    </style>
</head>

<body>
    <div id="root"></div>
</body>

</html>

<script type="text/babel">
    class MyButton extends React.Component {
        constructor(props) {
            super(props);
        }
        render() {
            // render,num1=2,num2=2
            console.log("render,num1=" + this.props.data.num1 + ",num2=" + this.props.data.num1);
            return (
                <p> This is a example of Data Flows Down</p >
            );
        }
    }

    class MyDiv extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                data: {
                    num1: 2,
                    num2: 5,
                }
            }

        }
        render() {
            return (<MyButton data={this.state.data} />);
        }
    }
    ReactDOM.render(<MyDiv />, document.getElementById('root'));
</script>